<template>
  <div id="app">
    <h2 style="text-align: center">当前数是{{myFlag}}</h2>
    <div class="count" @click="myAdd({step:1,flag:`xxx`})">{{myCount}}</div>
    <div class="count2" @click="myAdd2(2)">{{myCount}}</div>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapActions,mapMutations} from "vuex"

  export default {
    name: 'App',
    computed:{
      ...mapState({myCount:"count"}),
      ...mapGetters({myFlag:"flag"}),

      // ...mapState(["count"]),
      // ...mapGetters(["flag"]),
      // count(){return this.$store.state.count},
      // flag(){return this.$store.getters.flag}
    },
    methods:{
      ...mapActions({myAdd:"add"}),
      ...mapMutations({myAdd2:"add2"}),


      // ...mapActions(["add"]),
      // add(obj){this.$store.dispatch("add",obj)},
      // ...mapMutations(["add2"]),
      // add(obj){this.$store.dispatch("add",obj)},

      // add(){this.$store.dispatch("add",{step:1,flag:"xxx"})},
      // add2(){this.$store.commit("add2",2)}
    }
  }
</script>

<style scoped>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }

  .count2{
    width: 100px;
    height: 100px;
    background: pink;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;

    position: absolute;
    left: 0;
    right: 0;
    margin: auto;

    font-size: 30px;
    color: green;
  }
  .count{
    width: 100px;
    height: 100px;
    background: pink;
    text-align: center;
    line-height: 100px;
    border-radius: 50%;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

    font-size: 30px;
    color: red;
  }
</style>
